<template>
	<div class="userLiveData w944">
		<div class="label_top">
			<button @click="reBack"><i><&nbsp;</i>返回</button>
			<p>{{updateTitle}}的直播课程学习数据</p>
		</div>
		<p class="courseName">课程名称：{{courseName}}</p>
		<div class="el-tabs-report">
			<a :class="[this.dataType=='live'?'listOne':'listTwo']" @click="live">观看直播</a>
			<a :class="[this.dataType!='live'?'listOne':'listTwo']" @click="playback" style="margin-left: 10px;">观看回放</a>
		</div>
		<div class="label_table">
			<el-table ref="multipleTable" :data="tableData" border @selection-change="handleSelectionChange">
				<el-table-column label="序号" width="60">
					<template slot-scope="scope">{{ scope.row.sort}}</template>
				</el-table-column>
				<el-table-column prop="name" label="直播目录" v-if="this.dataType=='live'"></el-table-column>
				<el-table-column prop="name" label="回放目录" v-if="this.dataType!='live'"></el-table-column>
				<el-table-column label="学习时长">
					<template slot-scope="scope">{{ scope.row.studytime}}</template>
				</el-table-column>
			</el-table>
			<div class="fenyeMargin">
				<div class="pag_block">
					<el-pagination @current-change="handleCurrentChange" :current-page="currentpage" :page-size="pagesize" layout="prev, pager, next" :total="total"></el-pagination>
				</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default{
		data(){
			return{
				sort:'',
				studytime:'',
				type:1,
				dataType:'live',
				updateTitle:'',
				courseName:'',
				sort:'',
				search:'',
				tableData:[],
				pagesize: 15,
		        currentpage: 1,
		        total: 1,
			}
		},
		methods:{
			getParams() {
				this.userid = this.$route.params.userid;
				this.courseid = this.$route.params.courseid;
				this.updateTitle = this.$route.params.updateTitle;
				this.courseName = this.$route.params.courseName;
				console.log('userLiveData:',this.$route.params);
			},
			live(){
				this.dataType='live';
				this.type=1;
				this.getUserLiveData();
			},
			playback(){
				this.dataType='playback';
				this.type=2;
				this.getUserLiveData();
			},
			getUserLiveData(){
				this.$ajax({
					url: this.$root.jifuUrl + "/getUserLiveBroadcastStudyRecord?"+'page='+this.currentpage +'&num='+this.pagesize +'&courseid='+this.courseid+'&type='+this.type+'&userid='+this.userid,
					method: 'GET',
					data: {},
					success: res => {
						if(res.data.code == 200) {
							this.tableData = res.data.data.list;
							this.total=res.data.data.pageParam.items;
							for(var i = 0;i<this.tableData.length;i++){
								this.tableData[i].sort=i+1;
								let mss = this.tableData[i].studyTime;
								var h = parseInt((mss % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60));
								var hours=h>=10?h:"0"+h;
								var m = parseInt((mss % (1000 * 60 * 60)) / (1000 * 60));
								var minutes=m>=10?m:"0"+m;   
								var ss = parseInt((mss % (1000 * 60)) / 1000);
								var seconds=ss>=10?ss:"0"+ss;
								this.tableData[i].studytime=hours + ":" + minutes + ":" + seconds ;
							}
						}
					}
				});
			},
			
			
			
			
			
			handleSelectionChange(val) {
				this.multipleSelection = [];
				val.forEach(row => {
					this.multipleSelection.push(row.id);
				})
			},
			handleCurrentChange(value) {
				this.currentpage = value;
				this.getUserLiveData();
			},
			reBack(){
				this.$router.go(-1);
			},
		},
		mounted(){
			this.getParams();
			if(this.userid==null){
				this.$store.commit('GET_userLiveData');
				var s =this.$store.state.userLiveData;
				this.updateTitle=s.updateTitle;
				this.userid=s.userid;
				this.courseid = s.courseid;
				this.courseName=s.courseName;
			};
			this.getUserLiveData();
			window.addEventListener("beforeunload",()=>{
				s={
					updateTitle:this.updateTitle,
					userid:this.userid,
					courseName:this.courseName,
					courseid:this.courseid
				}
				this.$store.commit('SET_userLiveData', s);
			});
		}
	}
</script>

<style>
	.userLiveData .courseName{font-size: 15px;color: #333;margin-bottom: 18px;}
	.userLiveData .listTwo{border: 1px solid #44CEF6;box-sizing: border-box;position: relative;top: 1px;}
</style>